<template>
  <div>
    <el-row>
      <el-col :span="24">
        <h1 align="center">
          {{ resourceTypeInfo.resourceTypeTitle }}信息列表展示
        </h1>
      </el-col>
    </el-row>
    <el-row style="width: 98%; padding: 15px 0 15px 0; margin: 0 auto">
      <el-col :span="16">
        <div style="float: left">
          <el-button
            icon="el-icon-plus"
            type="success"
            :hidden="permissions[0] != 'admin'"
            @click="handleAddResourceEntity"
          >
            添加{{ resourceTypeInfo.resourceTypeTitle }}
          </el-button>
        </div>

        <div style="float: left; margin-left: 20px">
          <el-dropdown :hidden="permissions[0] != 'admin'">
            <el-button icon="el-icon-download">导出数据</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="handleDownloaSelectedResourceData"
              >
                导出选中数据
              </el-dropdown-item>
              <el-dropdown-item @click.native="handleDownloaResourceData">
                导出全部数据
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div style="float: left; margin-left: 20px">
          <el-dropdown :hidden="permissions[0] != 'admin'">
            <el-button icon="el-icon-upload2">导入数据</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDownloadMoudle">
                下载导入模板
              </el-dropdown-item>
              <el-dropdown-item
                @click.native="uploadResourceFileDialogForm = true"
              >
                导入实体数据
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div style="float: left; margin-left: 20px">
          <el-button type="primary" @click="searchAllFreeResource">
            所有空闲资源
          </el-button>
        </div>

        <div style="float: left; margin-left: 20px">
          <el-button type="primary" @click="searchAllCouldApplyResource">
            所有可申请资源
          </el-button>
        </div>
      </el-col>

      <el-col :offset="permissions[0] === 'admin' ? 2 : 12" :span="6">
        <div style="float: right">
          <el-button type="primary" @click="handleControllerColumnsShow">
            自定义展示列头
          </el-button>
        </div>

        <div style="float: right; margin-right: 20px">
          <el-popover placement="bottom-end" width="100%" trigger="click">
            <el-row>
              <SearchFormComponent
                @query-entity-list="queryEntityList"
                :resourceTypeName="name"
              ></SearchFormComponent>
            </el-row>
            <el-button type="primary" icon="el-icon-search" slot="reference">
              搜索
            </el-button>
          </el-popover>
        </div>
      </el-col>
    </el-row>

    <!-- 这里是主体表格 -->

    <el-row>
      <el-table
        v-if="isShow"
        ref="resourceTypeEntityDataList"
        :data="resourceTypeEntityDataList"
        border
        :header-cell-style="getHeadClass"
        :row-class-name="getRowClassName"
        empty-text="当前没有数据，请添加数据"
        style="width: 98%; margin: 0 auto"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40"
          v-if="permissions[0] === 'admin'"
          align="center"
        ></el-table-column>

        <el-table-column
          v-for="header in headDatas"
          :label="header.label"
          :prop="header.prop"
          :width="header.width"
          :key="header.prop"
          :sortable="header.sort == 'true' ? true : false"
          :align="header.align"
          :formatter="
            header.prop == 'mayApply' ? formatterMayApply : formatterNothing
          "
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          show-overflow-tooltip
          align="center"
          width="120"
          v-if="permissions[0] === 'admin'"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEditInfo(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            &emsp;&emsp;
            <template>
              <el-popconfirm
                @onConfirm="handleDeleteEntity(scope.$index, scope.row)"
                title="确认删除该实体么？"
              >
                <el-button slot="reference" type="text" style="color: red">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
            <el-button
              type="text"
              v-if="false"
              style="color: green"
              @click="handleApplyInfo(scope.$index, scope.row)"
            >
              去申请
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :current-page="pageData.currentPage"
        :layout="layout"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>

    <!-- 这里是添加实体弹窗 -->

    <el-dialog
      :title="title"
      @closed="resetAddResourceEntityData"
      :visible.sync="addResourceEntityDialogForm"
    >
      <el-form
        ref="addResourceEntityData"
        :label-width="formLabelWidth"
        :model="addResourceEntityData"
        style="width: 80%; margin: 0 auto"
      >
        <el-form-item label="实体类别" prop="resourceTypeTitle">
          <el-input
            v-model="addResourceEntityData.resourceTypeTitle"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="实体描述"
          :rules="[{ required: true, message: '请完善实体描述信息' }]"
          prop="resourceTypeEntityDescription"
        >
          <el-input
            v-model="addResourceEntityData.resourceTypeEntityDescription"
            placeholder="请输入实体描述"
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否可申请" prop="mayApply">
          <el-select
            v-model="addResourceEntityData.mayApply"
            placeholder="请选择是否可申请"
          >
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="item in resourceTypeEntityFieldList"
          :prop="item.resourceTypeFieldName"
          :label="
            item.resourceTypeFieldUnit != null &&
            item.resourceTypeFieldUnit != ''
              ? item.resourceTypeFieldTitle +
                '(' +
                item.resourceTypeFieldUnit +
                ')'
              : item.resourceTypeFieldTitle
          "
          :key="item.resourceTypeFieldId"
          :rules="[
            {
              required: item.resourceTypeFieldRequired,
              message: '请完善' + item.resourceTypeFieldTitle + '信息',
            },
          ]"
        >
          <el-input
            v-if="item.resourceTypeFieldType != 'enum'"
            v-model="addResourceEntityData[item.resourceTypeFieldName]"
            :placeholder="'请输入' + item.resourceTypeFieldTitle"
            @input="change($event)"
          ></el-input>
          <el-select
            v-else
            v-model="addResourceEntityData[item.resourceTypeFieldName]"
            placeholder="请选择"
          >
            <el-option
              v-for="enumItem in item.enumItemList"
              :key="enumItem.enumItemId"
              :label="enumItem.enumItemValue"
              :value="enumItem.enumItemKey"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="实体状态"
          :rules="[{ required: true, message: '请完善实体状态信息' }]"
          prop="status"
        >
          <el-select
            v-model="addResourceEntityData.status"
            placeholder="请选择实体状态"
          >
            <el-option
              v-for="status in usingStatus"
              :key="status.key"
              :label="status.value"
              :value="status.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用人">
          <el-cascader
            v-model="addResourceEntityData.owner"
            :options="userList"
            clearable
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addResourceEntityDialogForm = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">提交</el-button>
      </div>
    </el-dialog>

    <!-- 这里是导入实体数据弹窗 -->
    <el-dialog
      title="导入实体数据"
      @closed="resetUploadFileList"
      :visible.sync="uploadResourceFileDialogForm"
    >
      <el-row>
        <div style="width: 360px; margin: 0 auto">
          <el-upload
            class="upload-demo"
            ref="upload"
            drag
            action
            :http-request="uploadSectionFile"
            :file-list="uploadFileList"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
              <br />
              只能上传xls文件
            </div>
          </el-upload>
        </div>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadResourceFileDialogForm = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitUpload">提交</el-button>
      </div>
    </el-dialog>

    <!-- 申请资源弹窗 -->
    <ApplyInfoFormComponent
      @closed-dialog="closedDialog"
      :rowData="applyInfo"
      page="entityList"
      @refresh-list="getResourceTypeName"
      :addOrUpdate="addOrUpdate"
      v-if="addApplyDialogVisible"
    ></ApplyInfoFormComponent>

    <!-- 设置自定义列头信息弹窗 -->
    <el-dialog
      title="列头展示设置"
      :visible.sync="controlCustomizeColumnDialogForm"
    >
      <el-form>
        <el-table
          :data="defaultCustomizeColumnList"
          ref="customizeColumnList"
          @selection-change="handleColumnSelectionChange"
        >
          <el-table-column
            type="selection"
            width="30"
            align="center"
          ></el-table-column>
          <el-table-column
            label="列名"
            prop="label"
            align="center"
          ></el-table-column>
          <el-table-column label="宽度" align="center">
            <template slot-scope="scope">
              <el-form-item style="margin-top: 18px" label-width="20px">
                <el-input
                  v-model="scope.row.width"
                  placeholder="请输入50、100、120等数字"
                  value="scope.row.width"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="可排序" prop="sort" align="center">
            <template slot-scope="scope">
              <el-form-item style="margin-top: 18px" label-width="20px">
                <el-select
                  v-model="scope.row.sort"
                  placeholder="请选择列是否可排序"
                >
                  <el-option value="true" label="是"></el-option>
                  <el-option value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="controlCustomizeColumnDialogForm = false">
          取消
        </el-button>
        <el-button @click="handleDeleteCustomizeColumn">恢复默认</el-button>
        <el-button type="primary" @click="handleUpdateCustomizeColumn">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./resourceEntity.js"></script>

<style>
  html body .el-table th .cell {
    font-weight: 700 !important;
  }
  html body .el-table .warning-row {
    background: #ffffe0;
  }

  html body .el-table .success-row {
    background: #f5deb3;
  }
</style>
